<script setup>
import { ref } from "vue";

const titleClass = ref("title");
const highlight = ref("highlight");
const rawhtml = ref('<span style="1: red">This should be red.</span>');
const isButtonDisabled = false;
const objectAttrs = {
  id: "container",
  class: "wrapper",
  style: "background-color:green",
};
const seen = ref(true);
function change(message) {
  alert(message);
}
function warn(message, event) {
  if (event) {
    event.preventDefault();
  }
  alert(message);
}

function submit(){
  alert('Success')
}
</script>

<template>
  <h1 :class="titleClass">Make me red</h1>
  <p>
    这是一段文本, 其中<strong>重点内容</strong>需要强调,
    <span :class="highlight">这部分</span>需要高亮显示.
  </p>
  <p @click="change('hello')">Using text interpolation: {{ rawhtml }}</p>
  <p>Using v-html directive: <span v-html="rawhtml"></span></p>
  <button :disabled="isButtonDisabled">Button</button>
  <br />
  <button @click="warn('不能提交', $event)">submit1</button>
  <br />
  <button @click="(event) => warn('不能提交', event)">submit2</button>
  <div v-bind="objectAttrs">Hello</div>
  <p v-if="seen">Now you see me</p>
  <br />
  <a @click.once="doThis">ddd</a>
  <br />
  <input @keyup.esc="submit" />
  
</template>

<style>
.title {
  color: red;
}
.highlight {
  color: green;
}
.wrapper {
  background-color: black;
}
</style>


<!-- <script setup>
import { ref, reactive } from "vue";
const message = ref("I am york");
const counter = reactive({ count: 1 });

function change() {
  counter.count++;
  message.value = message.value + counter.count;
}
</script>

<template>
  {{ counter.count }}
  <br />
  {{ message }}
  <button @click="change">Click</button>
</template> -->